<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 16:06:10
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 10:31:23
-->
<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      :title="moduleTitle"
      width="60%"
      placement="right"
    >
      <template #extra>
        <a-space wrap>
          <a-button
            type="primary"
            @click="handelOpen('新增子类目', { id: cateId }, 'add')"
            >新建</a-button
          >
          <a-button type="primary" danger @click="modalOpen = false"
            >关闭</a-button
          >
        </a-space>
      </template>
      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="categoryColumns"
          childrenColumnName="childrenList"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'coverPic'">
              <a-image width="100px" :src="record.coverPic"></a-image>
            </template>
            <template v-if="column.key === 'state'">
              {{ record.state === 1 ? "启用" : "禁用" }}
            </template>
            <template v-if="column.key === 'operate'">
              <a-space>
                <a-button
                  v-if="record.parent"
                  type="primary"
                  @click="handelOpen('新增子类目', { id: record.id }, 'add')"
                  >新增子类目</a-button
                >
                <a-button
                  type="primary"
                  @click="handelOpen('编辑子类目', record, 'update')"
                  >编辑</a-button
                >
                <a-popconfirm
                  :title="`您是否要${
                    record.state == 2 ? '启用' : '禁用'
                  }此条数据?`"
                  @confirm="handleStateChange(record)"
                >
                  <a-button v-if="record.state == 1" danger type="primary"
                    >禁用</a-button
                  >
                  <a-button v-else type="primary">启用</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-drawer>
    <addHeading
      ref="groupRef"
      v-if="show"
      :title="title"
      :list="list"
      :type="types"
      @refreshList="refreshList"
      @closeModal="closeModal"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { categoryColumns } from "../../columns.js";
import addHeading from "./addHeading.vue";
import { message } from "ant-design-vue";
import { catalogChildList, catalogUpdateState } from "@/api/goodConfig.js";
const modalOpen = ref(false);
const moduleTitle = ref("子类目管理");
const groupRef = ref(null);
const cateId = ref(null);
const open = (record) => {
  modalOpen.value = true;
  cateId.value = record.id;
  getCatalogChildList(record.id);
};
const dataSource = ref([]);
function getCatalogChildList(id) {
  catalogChildList({ id }).then((res) => {
    if (res.code == 200) {
      dataSource.value = res.data.map((val) => {
        val.parent = true;
        return val;
      });
    }
  });
}
const title = ref("");
const types = ref("");
const list = ref({});
const show = ref(false);
const handelOpen = (titles, record, type) => {
  title.value = titles;
  list.value = record;
  types.value = type;
  show.value = true;
  // groupRef.value.open(titles, record,type);
};
function handleStateChange(row) {
  catalogUpdateState({ id: row.id, state: row.state == 1 ? 2 : 1 }).then(
    (res) => {
      if (res.code === 200) {
        message.success(`${row.state == 1 ? "禁用成功" : "启用成功"}`);
        getCatalogChildList(cateId.value);
      }
    }
  );
}
function closeModal() {
  show.value = false;
}
function refreshList() {
  getCatalogChildList(cateId.value);
  show.value = false;
}
defineExpose({ open });
</script>
